<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>产品资费</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/zifei.css"/>
		<link rel="stylesheet" href="css/animate.css">
	</head>
	<body>
		<div class="web">
			
			<!--头部-->
			<div class="top">
				<div class="topbox">
					<div class="logo">
						<img src="img/logo.jpg"/>
					</div>
					
					<!--导航-->
					<div class="nav">
						<span><a href="index.html">首页</a></span>
						<span><a href="chanpingongneng.html">产品功能</a></span>
						<span class="active"><a href="zifei.html">产品资费</a></span>
						<span><a href="About.html">关于我们</a></span>
						<span class="login btn"><a href="#">用户登录</a></span>
						<span class="enrol btn"><a href="zhuce.html">企业注册</a></span>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			
			<!--隐藏的头部-->
			<div class="yincang">
				<div>
					<p class="jia"><img src="img/列表.png"/></p>
					<div class="caidan">
						<p class="active"><a href="index.html">首页</a></p>
						<p><a href="chanpingongneng.html">产品功能</a></p>
						<p><a href="zifei.html">产品资费</a></p>
						<p><a href="About.html">关于我们</a></p>
						<p class="login btn"><a href="#">用户登录</a></p>
						<p class="enrol btn"><a href="#">企业注册</a></p>
					</div>
				</div>
				<div>
					<p><img src="img/logo.jpg"/></p>
				</div>
			</div>
			
			<!--banner-->
			<div class="banner">
				<h2 class="wow fadeInDown">
					<span>八小时企业版上线</span>
					<span>全新至尊体验</span>
				</h2>
				<div class="wow fadeInDown">
					<span>高效</span>
					<span>全能</span>
					<span>一站式</span>
				</div>
				<div>
					<div>
						<input type="text" placeholder="企业名称" class="project" />
						<input type="text" placeholder="姓名" class="name" />
						<input type="text" placeholder="手机号" class="num" />
						<a href="#">快速注册</a>
					</div>
				</div>
			</div>
			
			<!--专业版-->
			<div class="line">
				<div class="linetwo wow rotateIn">
					<div class="biaoti">
						<div class="qian">
							<span>专业版</span>
							<span>1800</span>
							<span>元/年</span>
						</div>
						<div class="title">为HR提供一个人力资源信息化学习平台，为企业提供易用高效的HR效率软件。</div>
						<div class="biaoti_pic">
							<span><img src="img/tuiguang.png"/></span>
							<span>推广价</span>
						</div>
					</div>
					
					<div class="xian"></div>
					
					<div class="matter">
						<ul>
							<li>员工考勤计算</li>
							<li>员工薪酬计算</li>
							<li>员工异动管理</li>
						</ul>
						<ul>
							<li>立体式员工档案管理</li>
							<li>企业专属招聘服务</li>
							<li>PC+APP便捷操作模式</li>
						</ul>
						<ul>
							<li>自定义班次/考勤组/排班管理</li>
							<li>系统数据统计分析</li>
							<li>专属客服顾问</li>
						</ul>
					</div>
				</div>
			</div>
			
			<!--下载-->
			<div class="download wow fadeInDown">
				<h2>移动端APP下载方式</h2>
				<div class="downloadbox">
					<ul>
						<li>
							<span class="banben">安卓版</span>
							<span class="scan">扫描以下二维码进行下载</span>
						</li>
						<li>
							<span class="anzhuopic"><img src="img/anzhuo.png"/></span>
							<span class="sao">手机浏览器/微信扫一扫</span>
						</li>
					</ul>
					<ul>
						<li>
							<span class="banben">IOS版</span>
							<span class="scan">前往App Store进行下载</span>
						</li>
						<li>
							<span class="app"><img src="img/APP.png"/></span>
							<span class="jiantou"><img src="img/jiantou.png"/></span>
							<span class="ios"><img src="img/ios.png"/></span>
						</li>
					</ul>
				</div>
			</div>
			
			<!--bottom-->
			<div class="bottom">
				<div>联系方式：13710415266</div>
				<div>联系地址：广州市白云区机场北路88号</div>
				<div>Copyright © 2016. 深圳优领信息科技有限公司 All rights reserved.</div>
			</div>
			
			<!--返回顶部-->
			<div class="return" onClick="gotoTop();return false;">
				<img src="img/jiantou_09.jpg"/>
			</div>
		</div>
		
		<script type="text/javascript">
			//			头部
			window.onscroll = function(){ 
			     var t = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离
			     var top = document.querySelector( ".top" ); 
			     var uptop = document.querySelector( ".return" ); 
			     if( t > 0 ) { 
			        top.classList.add("Creative");
			     } else { //如果距离顶部小于300px
			        top.classList.remove("Creative");
			     } 
			     
			     if( t == 0 ) { 
			        uptop.style.display="none"
			     } else { 
			        uptop.style.display="block"
			     } 
			} 
			
			//			返回顶部
			function gotoTop(acceleration,stime) {
			    acceleration = acceleration || 0.1;
			    stime = stime || 10;
			    var x1 = 0;
			    var y1 = 0;
			    var x2 = 0;
			    var y2 = 0;
			    var x3 = 0;
			    var y3 = 0; 
			    if (document.documentElement) {
			        x1 = document.documentElement.scrollLeft || 0;
			        y1 = document.documentElement.scrollTop || 0;
			    }
			    if (document.body) {
			        x2 = document.body.scrollLeft || 0;
			        y2 = document.body.scrollTop || 0;
			    }
			    var x3 = window.scrollX || 0;
			    var y3 = window.scrollY || 0;
			 
			    // 滚动条到页面顶部的水平距离
			    var x = Math.max(x1, Math.max(x2, x3));
			    // 滚动条到页面顶部的垂直距离
			    var y = Math.max(y1, Math.max(y2, y3));
			 
			    // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
			    var speeding = 1 + acceleration;
			    window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
			 	
			    // 如果距离不为零, 继续调用函数
			    if(x > 0 || y > 0) {
			        var run = "gotoTop(" + acceleration + ", " + stime + ")";
			        window.setTimeout(run, stime);
			    }
			    
			}
			
			//			移动端头部
			function caidan(){
				var p = document.querySelector(".jia");
				var div = document.querySelector(".caidan");
				p.addEventListener("click",function(){
					if(div.style.display=="block"){
						div.style.display="none"
					}else{
						div.style.display="block"
					}
				})
				
			}
			caidan()
		</script>
		
		<!--动画-->
	    <script src="js/wow.js"></script>
		<script type="text/javascript">
			var w = new WOW();
			w.init()
		</script>
	</body>
</html>
